<template>
    <div class="searchCom">
        <div class="content">
            <div class="search">
                <div class="line">
                    <div class="text">
                        文物质地
                    </div>
                    <el-select v-model="params.texture" clearable  placeholder="不限">
                        <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="line">
                    <div class="text">
                        文物朝代
                    </div>
                    <el-select v-model="params.dynasty_id" clearable  placeholder="不限">
                        <el-option v-for="item in options2" :key="item.value" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="line">
                    <div class="text">
                        文物分类
                    </div>
                    <el-select v-model="params.cate_id" clearable  placeholder="不限">
                        <el-option v-for="item in options3" :key="item.value" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="line">
                    <div class="text">
                        文物名称
                    </div>
                    <el-input v-model="params.name" placeholder="请输入名称 "></el-input>
                </div>
                <el-button type="primary" @click="searchFn"><i class="el-icon-search el-icon--right"></i>搜索</el-button>
            </div>
            <div class="list">
                <div class="item" v-for="(item, index) in list" :key="index" @click="detail(item)">
                    <img :src="item.image" />
                    <div class="text">
                        {{ item.name }}
                    </div>
                </div>
                <i> </i>
                <i> </i>
                <i> </i>
            </div>
            <el-pagination @current-change="handleCurrentChange" :current-page="params.page"
                :page-size="params.page_size" layout="total, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { collectionList, getCollectionTexture, getCollectionDynasty, getCollectionCate } from "@/api/search";
export default {
    props: ['id'],
    data() {
        return {
            options: [],
            options2: [],
            options3: [],
            params: {
                page: 1,
                page_size: 10,
                storeroom_id: '',
                name: '',
                cate_id: '',
                dynasty_id: '',
                texture: ''
            },
            total: 0,
            list: []
        }
    },
    created() {
        this.params.storeroom_id = this.id
        this.getCollectionTexture() 
        this.getCollectionDynasty() 
        this.getCollectionCate()
        this.collectionList()
    },
    methods: {
        searchFn() {
            this.params.page = 1
            this.collectionList()
        },
        collectionList() {
            collectionList(this.params).then(res => {
                console.log(res);
                this.list = res.data.list
                this.total = res.data.count
            }).catch(e => {
                console.log(e);
            })
        },
        getCollectionTexture() {
            getCollectionTexture().then(res => {
                console.log(res);
                this.options = res.data
            }).catch(e => {
                console.log(e);
            })
        },
        getCollectionDynasty() {
            getCollectionDynasty().then(res => {
                console.log(res);
                this.options2 = res.data
            }).catch(e => {
                console.log(e);
            })
        },
        getCollectionCate() {
            getCollectionCate().then(res => {
                console.log(res);
                this.options3 = res.data
            }).catch(e => {
                console.log(e);
            })
        },
        detail(val) {
            this.$router.push('/object_detail?id='+val.id)
        },
        handleCurrentChange(val) {
            this.params.page = val 
            this.collectionList()
        }
    }
}
</script>

<style lang="scss" scoped>
.searchCom {
    width: 1000px;
    margin: 0 auto;
    padding: 20px 0;

    .content {
        padding: 20px;
        background: #fff;
        border-radius: 18px;

        .search {
            display: flex;
            align-items: center;
            background: #F7ECDC;
            border-radius: 13px;
            height: 62px;
            padding: 0 10px;
            margin-bottom: 10px;

            .line {
                display: flex;
                align-items: center;
                color: #A2754C;
                width: auto;

                .text {
                    display: inline-block;
                    white-space: nowrap;
                }

                ::v-deep .el-input__inner {
                    width: 100px;
                }

                .el-input {
                    margin: 0 10px;
                    ::v-deep .el-input__inner {
                        width: 120px;
                    }
                }
            }

            .el-button {}
        }

        .list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .item,
            i {
                width: 180px;

            }

            .item {
                border: 1px solid #CFCFCF;
                border-radius: 10px;
                margin-bottom: 10px;
                cursor: pointer;

                img {
                    width: 100%;
                    height: 190px;
                    margin: 0;
                }

                .text {
                    font-size: 20px;
                    font-family: PingFang SC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #683C19;
                    text-align: left;
                    padding: 10px;
                }
            }
        }
    }
}
</style>